<template>
  <div class="battles">
    <div class="page-title">
      <div class="page-title-text">BATTLES</div>
      <div class="page-title-rules">
        <div class="question-circle-icon" @click="queryShow = true">
          <span class="icon iconfont query">&#xe622;</span>
        </div>
        <div class="title-rules-text">Rules</div>
      </div>
    </div>

    <div class="create-btn">Create Battle</div>

    <div class="filter-row">
      <div class="filter-item filter-item-active">Sort by Date</div>
      <div class="filter-item">Sort by Price</div>
      <div class="history-item">
        <div class="u-icon u-icon--right">
          <div
            hover-class=""
            class="u-icon__icon uicon-clock"
            style="
              font-size: 22px;
              line-height: 22px;
              font-weight: normal;
              top: 0px;
              color: rgb(51, 51, 51);
            "
          ></div>
          <!---->
        </div>
        <span style="margin-left: 5px">game history</span>
      </div>
    </div>

    <div class="list-content">
      <div>
        <div class="battle-card" v-for="(item, index) in 10" :key="index">
          <div class="battle-card-row">
            <div class="box-content">
              <div class="box-num-body">3 of 3</div>
              <div class="box-list">
                <div
                  class="box-list-content"
                  style="transform: translate(0px, 0px)"
                >
                  <div
                    class="arrow-content"
                    style="transform: translate(233px, 0px)"
                  >
                    <img
                      class="top-arrow"
                      src="/static/img/main/slot-indicator.svg"
                      draggable="false"
                    /><img
                      class="bottom-arrow"
                      src="/static/img/main/slot-indicator.svg"
                      draggable="false"
                    />
                  </div>
                  <div class="box-item" v-for="(item, index) in 6" :key="index">
                    <img
                      class="box-item-cover"
                      src="/static/img/main/73.png"
                      draggable="false"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bottom-row">
            <div class="user-row">
              <div class="avatar-badge">
                <img
                  class="user-avatar"
                  src="/static/img/main/6.webp"
                  draggable="false"
                />
                <div class="num-content">93</div>
              </div>
              <i class="iconfont icon-icon_duizhan"></i>
              <div class="avatar-badge">
                <img
                  class="user-avatar"
                  src="/static/img/main/df5135ca71b363fc359c45c62b74cf0.jpg"
                  draggable="false"
                />
                <div class="num-content">103</div>
              </div>
            </div>
            <div class="btn-row">
              <div>
                <div class="watch-btn">Watch Battle</div>
                <div class="btn-row-price">
                  <img
                    class="row-price-fire"
                    src="/static/img/main/fire.svg"
                    draggable="false"
                  /><span class="row-price-text">Unboxed:</span
                  ><span
                    >$<span
                      class="u-count-num"
                      style="font-size: 14px; font-weight: bold"
                      ><span>8,155.34</span></span
                    ></span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div></div>
    </div>

    <van-dialog v-model="show" title="Tips">
      <div class="content">Please enter the withdrawal amount</div>
    </van-dialog>
    <van-popup v-model="queryShow"
      ><div class="tip-content">
        <div class="close-content" @click="queryShow = false">
          <span class="icon iconfont close">&#xe748;</span>
        </div>

        <div class="rule-row">
          Rules: As with regular unboxing, choose your mystery box, enter the
          ring and wait for your opponent to join. When the opponent enters, the
          battle begins! The two players facing off will receive an item from
          the box each round. Judging by the item's value, the player with the
          higher item value wins and receives the cash sum of all loot.
        </div>
        <div class="rule-row">
          For example: You create a war with a total of 10 boxes. After you open
          10 boxes, the total value of the items is $5,000. After the opponent
          opens 10 boxes, the total value of the items is $4,500. You win! You
          will get 5000+4500=9500 USD.
        </div>
        <div class="rule-row">
          If you're unlucky, there's a<strong>"Crazy Mode"</strong>for you to
          choose from, where the rules are reversed: after opening the box, the
          player with the lower item's total value wins!
        </div>
      </div></van-popup
    >
  </div>
</template>
  
  <script>
export default {
  name: "withdraw",
  data() {
    return {
      show: false,
      queryShow: false,
      withdrawAmount: undefined,

      sedItem: "paypal",
    };
  },
  methods: {
    selectItem(item) {
      this.sedItem = item;
    },
    goBack() {
      this.$router.go(-1);
    },
    goPayAgreement() {
      this.$router.push({
        name: "payAgreement",
      });
    },
    submit() {
      this.show = true;
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.battles {
  .tip-content {
    width: 342px;
    padding: 16px 11px;
    box-sizing: border-box;
    background: var(--content-bc);
    border-radius: 6px;
    font-size: 13px;
    position: relative;
    .rule-row {
      font-size: 14px;
      color: var(--text-color);
      margin-bottom: 10px;
      opacity: 0.8;
    }
    .close-content {
      position: absolute;
      top: 5px;
      right: 5px;
      z-index: 1;
    }
    .content {
      overflow: auto;
    }
  }
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  padding-top: calc(0px + 10px);
  .page-title {
    margin-top: 10px;
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .page-title {
    margin-top: 10px;
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .page-title-rules {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      margin-left: auto;
      .query {
        font-size: 18px;
        line-height: 18px;
        font-weight: normal;
        top: 0px;
        color: rgb(61, 157, 67);
      }
      .title-rules-text {
        margin-left: 2px;
        color: #3d9d43;
        font-family: StagSansBold;
      }
    }
  }
  .create-btn {
    font-size: 16px;
    width: 100%;
    height: 45px;
    color: #fff;
    background: linear-gradient(98deg, #f48836, #f4364c 100%);
    font-family: StagSansBold;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
  }
  .filter-row {
    width: 100%;
    padding: 10px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    .filter-item {
      font-size: 14px;
      font-family: StagSansBold;
      margin-right: 10px;
      color: #999;
    }
    .filter-item-active {
      color: var(--text-color);
    }
    .history-item {
      font-size: 12px;
      font-family: StagSansBold;
      margin-left: auto;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      opacity: 0.8;
    }
  }
  .battle-card {
    background: var(--battle-card-bc);
    width: 100%;
    margin-bottom: 10px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
    cursor: pointer;
    padding: 8px 8px;
    box-sizing: border-box;
    .user-avatar {
      width: 27px;

      border-radius: 50%;
    }
    .btn-row-price {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 6px;
      font-size: 14px;
      font-weight: 700;

      .row-price-fire {
        width: 18px;
        height: 18px;
        object-fit: contain;
      }

      .row-price-text {
        opacity: 0.7;
        margin: 0 4px;
      }
    }
    .btn-row {
      width: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin-left: 20px;
      .watch-btn {
        background-color: var(--watch-btn-bc);

        width: 166px;
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: StagSansMedium;
      }
    }
    background-color: #fff;
    .bottom-row {
      display: flex;
      justify-content: space-between;
      align-content: center;
      margin-top: 10px;
    }
    .user-row {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 256px;
    }

    .icon-icon_duizhan {
      font-size: 28px;
      margin: 0 4px;
    }
    .icon-icon_duizhan:before {
      content: "\e605";
    }

    .avatar-badge {
      width: 29px;
      height: 29px;
      border-radius: 100%;
      border: 3px solid #3d9d43;
      position: relative;

      .num-content {
        position: absolute;
        font-size: 12px;
        font-weight: 700;
        background-color: #3d9d43;
        width: 22px;
        height: 22px;
        border: 1px solid #fff;
        border-radius: 100%;
        bottom: 0;
        left: 0;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-transform: translate(-50%, 30%) scale(0.8);
        transform: translate(-50%, 30%) scale(0.8);
      }
    }
  }
  .list-content {
    width: 100%;

    .battle-card-row {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
    }
    .box-content {
      flex: 1;
      height: 98px;
      padding: 4px;
      box-sizing: border-box;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
      border-color: #99a2a5;
      overflow: hidden;
      position: relative;
      .box-list {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .box-item {
          background: var(--battle-card-bc);
          display: flex;
          justify-content: center;
          align-items: center;
          width: 90px;
          height: 90px;
          flex-shrink: 0;
          flex-grow: 0;
          margin-right: 4px;
          .box-item-cover {
            width: 60px;
            height: 60px;
            object-fit: contain;
          }
        }
        .box-list-content {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          height: 90px;
          position: relative;
          transition: 0.5s;
          transition-timing-function: ease-out;
          .top-arrow {
            width: 10px;
            height: 10px;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
          }
          .bottom-arrow {
            width: 10px;
            height: 10px;
            position: absolute;
            bottom: 0;
            left: 0;
            -webkit-transform: translate(-50%) rotate(180deg);
            transform: translate(-50%) rotate(180deg);
          }
          .arrow-content {
            width: 0;
            height: 90px;
            position: relative;
            z-index: 2;
            transition: 0.5s;
            transition-timing-function: ease-in-out;
          }
        }
      }
      background-color: var(--box-content-bc);
      .box-num-body {
        position: absolute;
        top: 4px;
        font-weight: 700;
        right: 4px;
        font-size: 12px;
        z-index: 2;
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
      }
    }
  }
}
</style>
  
  
  .<style lang="scss">
.battles {
  .van-popup {
    position: fixed;
    max-height: 100%;
    overflow-y: auto;
    background-color: var(--content-bc);
    transition: transform 0.3s;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
  }
  .van-dialog {
    background: var(--content-bc);
    color: var(--text-color);
    .content {
      text-align: center;
      /* width: 131px; */
      margin: o auto;
      margin: 0 auto;
    }
  }
  .van-dialog__confirm,
  .van-dialog__confirm:active {
    background: var(--content-bc);
    color: var(--text-color);
  }
  .box {
    // width: 450px;
    background: #fff;
    // padding: 30px;
    // box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 0 0 0 5px;
    background: var(--conten-bc);
  }

  .box .input_data {
    height: 30px;
    width: 100%;
    position: relative;
    margin-top: 10px;
  }

  .box .input_data input {
    display: block;
    height: 100%;
    width: 100%;
    border: none;
    // font-size: 16px;
    // border-bottom: 2px solid silver;
    background: var(--content-bc);
    color: var(--text-color);
    font-size: 12px;
  }

  .input_data input:focus,
  .input_data input:valid {
    outline: 0;
    // border-bottom-color: #4158d0;
  }

  .input_data input:focus ~ label,
  .input_data input:valid ~ label {
    transform: translateY(-12px);
    font-size: 12px;
    color: grey;
  }

  .box .input_data label {
    position: absolute;
    bottom: 10px;
    left: 0;
    color: grey;
    pointer-events: none;
    transition: all 0.3s ease;
  }

  .vs-input {
    margin: 5px;
    margin-top: 20px;
  }
  .van-cell {
    background: var(--content-bc);
    border-bottom: 1px solid hsla(0, 0%, 50.2%, 0.8);
  }
  .van-field__label {
    color: var(--text-color);
    font-size: 22px;
    width: 20px;
  }
  .van-field__control {
    color: var(--text-color);
    font-size: 27px;
  }
  .van-field__control::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #999;
  }
}
</style>